<!DOCTYPE html>
<html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <link rel="stylesheet" href="style.css" />
          <title>CSS 导航条</title>
          <style>
              html,
              body {
                margin: 0;
                font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
              }
              
              * {
                box-sizing: border-box;
              }
              
              ul,
              li {
                margin: 0;
                padding: 0;
              }
              
              body {
                background-color: #1e272e;
              }
              
              nav {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
              }
              
              ul {
                position: relative;
                display: flex;
              }
              
              ul li {
                /* 如果设置为inline-block，会有空隙 */
                /* https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements */
                list-style: none;
                width: 120px;
                line-height: 40px;
                text-align: center;
              }
              
              ul li a {
                color: white;
                text-decoration: none;
              }
              
              .slider {
                width: 100px;
                height: 40px;
                background-color: #5352ed;
                border-radius: 4px;
                position: absolute;
                left: 10px;
                bottom: 0;
                z-index: -1;
                transition: all ease 0.4s;
                animation: 2s ease-in-out waves infinite;
              }
              
              li:nth-child(1):hover ~ .slider {
                left: 10px;
              }
              
              li:nth-child(2):hover ~ .slider {
                left: 128px;
              }
              
              li:nth-child(3):hover ~ .slider {
                left: 248px;
              }
              
              li:nth-child(4):hover ~ .slider {
                left: 368px;
              }
              
              li:nth-child(5):hover ~ .slider {
                left: 488px;
              }
              
              @keyframes waves {
                from {
                  clip-path: polygon(
                    0% 17%,
                    9% 10%,
                    18% 4%,
                    30% 0%,
                    43% 1%,
                    49% 4%,
                    57% 7%,
                    66% 10%,
                    78% 11%,
                    89% 11%,
                    96% 9%,
                    100% 7%,
                    100% 100%,
                    0% 100%
                  );
                }
                50% {
                  clip-path: polygon(
                    0% 4%,
                    6% 9%,
                    13% 13%,
                    23% 15%,
                    31% 16%,
                    42% 15%,
                    49% 13%,
                    61% 10%,
                    71% 5%,
                    81% 3%,
                    90% 2%,
                    100% 5%,
                    100% 100%,
                    0% 100%
                  );
                }
                to {
                  clip-path: polygon(
                    0% 17%,
                    9% 10%,
                    18% 4%,
                    30% 0%,
                    43% 1%,
                    49% 4%,
                    57% 7%,
                    66% 10%,
                    78% 11%,
                    89% 11%,
                    96% 9%,
                    100% 7%,
                    100% 100%,
                    0% 100%
                  );
                }
              }
              
          </style>
        </head>
        <body>
          <header>
            <nav>
              <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品介绍</a></li>
                <li><a href="#">服务介绍</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <div class="slider"></div>
              </ul>
            </nav>
          </header>
        </body>
      </html>